<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="会员管理" ref="navbar" ></fa-navbar>
		<view class="u-p-10 u-flex u-col-center" style="width: 94%;margin: 0 auto;">
			<view style="width: 20%;padding-left: 12px;" @click="showType = true"><span>{{qiehuan}}</span>  <u-icon name="arrow-down-fill" style="margin-left: 5px;" size="20"></u-icon></view>
			<view class="u-flex-1"  style="width: 35%;">
				<u-search v-model="keyword" placeholder="请输入"  @custom="searchKeyword" @search="searchKeyword"/>
			</view>
			<view class="u-p-l-20 u-p-r-5 u-flex u-col-center" @click="goPage('/pages/my/user_add', true)">
				<!-- <image src="../../static/image/add.png" mode="widthFix" style="width: 20px;"></image> -->
				<button class="_btn">添加会员</button>
			</view>
		</view>
		<view class="u-p-10 u-flex u-col-center" style="width: 94%;margin: 0 auto;">
			<view class="u-flex-1" @click="show = true" style="width: 60%;background: #fff;border-radius: 50px;">
				<view class="c_date_left">
					时间筛选:
				</view>
				<view class="c_date_right">
					{{shijjian}}
				</view>
			</view>
			<view class="u-p-l-20 u-p-r-5 u-flex u-col-center" @click="goPage('/pages/my/user_tcx_add', true)">
				<!-- <image src="../../static/image/add.png" mode="widthFix" style="width: 20px;"></image> -->
				<button class="_btn">快速购买</button>
			</view>
		</view>
		<u-select v-model="showType" mode="single-column" :list="typeList" @confirm="typeconfirm"></u-select>
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		<view style="padding: 5px 6% 0;">会员总数: {{m_count}} 人</view>
		<!-- 汇演列表 -->
		<view class="content" style="overflow-y: hidden;margin-top: 15px;">
			<view class="content_div" style="width: 1000px;">
				<!-- 表头 -->
				<view class="header">
					<view class="cell" style="width: 10%">序号</view>
					<view class="cell" style="width: 12%">姓名</view>
					<view class="cell" style="width: 14%">购买记录</view>
					<view class="cell" style="width: 10%">寄</view>
					<!-- <view class="cell" style="width: 10%">取</view> -->
					<view class="cell last" style="width: 10%">挂</view>
					<view class="cell" style="width: 16%">购买时间</view>
					<view class="cell" style="width: 12%" @click="showSelect = true">会员等级  <u-icon name="arrow-down-fill" style="margin-left: 5px;" size="18"></u-icon></view>
					<view class="cell" style="width: 12%">会员资料</view>
					<view class="cell" style="width: 14%">手机号码</view>
					
				</view>
				<u-select v-model="showSelect" mode="single-column" :list="selectList" @confirm="confirm3"></u-select>
				<!-- 数据行 -->
				<view class="row" v-for="(item, index) in tableData" :key="index">
					<view class="cell" style="width: 10%">{{ item.id }}</view>
					<view class="cell" style="width: 12%">{{ item.username }}</view>
					<view class="cell" style="width: 14%"  @click="chakan1(item)">{{ item.last_data.tc_name }} ></view>
					<view class="cell" style="width: 10%" @click="ji(item)">{{ item.ji_num }}个</view>
					<!-- <view class="cell" style="width: 10%" @click="qu(item)">{{ item.qu_num }}个</view> -->
					<view class="cell last" style="width: 10%" @click="gua(item)">{{ item.gua_num }}元</view>
					<view class="cell" style="width: 16%">{{ item.last_data.createtime }}</view>
					<view class="cell" style="width: 12%">{{ item.level_name}}</view>
					<view class="cell" style="width: 12%" @click="chakan(item)">查看</view>
					<view class="cell" style="width: 14%">{{ item.mobile }}</view>
					
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="tableData.length" @click="jiazai">
			<u-loadmore :status="has_more ? status : 'nomore'" />
		</view>
		
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!tableData.length">
			<u-empty></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		onLoad() {
			this.is_update = true;
			this.getArchives();
			this.getCount();
		},
		data() {
			return {
				value: 0,
				m_count:0,
				qiehuan:'会员',
				qiehuan_id:2,
				shijjian: '请选择时间筛选区间',
				startDate:'',
				endDate:'',
				keyword:'',
				range: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "当天" },
					{ value: 2, text: "本周" },
					{ value: 3, text: "本月" },
				],
				typeList: [
					{
						value: '1',
						label: '套餐'
					},
					{
						value: '2',
						label: '会员'
					}
					
				],
				selectList: [
					{
						value: '1',
						label: '全部'
					},
					{
						value: '2',
						label: '普通'
					},
					{
						value: '3',
						label: '青铜'
					},
					{
						value: '4',
						label: '白银'
					},
					{
						value: '5',
						label: '黄金'
					},
					{
						value: '6',
						label: '钻石'
					}
				],
				is_show:1,
				bgColor:'#f9f9f9',
				isTab: false,
				showSelect:false,
				showType:false,
				tabwidth: 40,
				tabList: [],
				level_name:'全部',
				current: 0,
				scrollTop: 0,
				list: [],
				status: 'loadmore',
				has_more: false,
				page: 1,
				channel_id: 0,
				is_update: false,
				options: [],
				tableData: [],
				page: 1,
				pageSize: 5,
				isLoading: false,
				hasMore: true,
				show: false,
				mode: 'range'
			};
		},
		methods: {
			getCount: async function() {
				let data = {};
				let res = await this.$api.getMCount(data);
				if(res.code==1){
					this.m_count = res.data
				}
			},
			typeconfirm(e) {
				this.qiehuan = e[0].label;
				this.qiehuan_id = e[0].value;
			},
			confirm3(e) {
				this.level_name = e[0].label;
				this.page = 1;
				this.tableData =[];
				this.getArchives();
			},
			searchKeyword(){
				console.log(this.keyword)
				if(this.qiehuan_id==0){
					this.$u.toast('请选择搜索内容');
					return false;
				}
				this.page = 1;
				this.tableData =[];
				this.getArchives();
			},
			chakan1(item){
				let page = '/pages/my/user_goumai';
				this.goPage(page + '?user_id=' + item.id);
			},
			chakan(item){
				let page = '/pages/my/user_zl';
				this.goPage(page + '?user_id=' + item.id);
			},
			ji(item){
				
				let page = '/pages/my/user_ji';
				this.goPage(page + '?user_id=' + item.id);
			},
			qu(item){
				
				let page = '/pages/my/user_qu';
				this.goPage(page + '?user_id=' + item.id);
			},
			gua(item){
				let page = '/pages/my/user_gua';
				this.goPage(page + '?user_id=' + item.id);
			},
			goDetail(item) {
				let page = item.model_id == 2 ? '/pages/product/detail' : '/pages/article/detail';
				this.goPage(page + '?id=' + item.id);
			},
			change(e) {
				console.log(e);
				if(e){
					this.startDate = e.startDate;
					this.endDate = e.endDate;
					this.shijjian = e.startDate+' 至 '+e.endDate;
					this.page = 1;
					this.tableData =[];
					this.getArchives()
				}
			},
			chang1(e) {
			      console.log("e:", e);
			},
			// change(index) {
			// 	//重设Bar宽度
			// 	this.tabwidth = this.$util.strlen(this.tabList[index].name) * 30;
			// 	this.current = index;
			// 	this.channel_id = this.tabList[index].id;
			// 	this.page = 1;
			// 	this.is_update = true;
			// 	this.getmyArchives();
			// },
			getArchives: async function() {
				let data = {
					page: this.page,
					level_name: this.level_name,
					keyword:this.keyword,
					startDate:this.startDate,
					endDate:this.endDate,
					member_id: this.user_id,
					qiehuan_id:this.qiehuan_id
				};
				
				let res = await this.$api.myUserList(data);
				console.log(res,'111')
				if(res.data.length){
					this.tableData = this.tableData.concat(res.data);

					if(res.data.length<10){
						this.has_more = false;
					}else{
						this.has_more = true;
					}
				}else{
					this.has_more = false;
				}
				
			},
			click(index, index1) {
				this.list[index].show = false;
				if (index1 == 1) {
					this.$api.deleteArchives({ id: this.list[index].id }).then(res => {
						this.$u.toast(res.msg);
						if (res.code) {
							this.list.splice(index, 1);
						}
					})
				} else {
					this.$u.route('/pages/publish/channel', { archives_id: this.list[index].id });
				}
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			goDetail(item, index) {
				let page = item.model_id == 2 ? '/pages/product/detail' : '/pages/article/detail';
				this.$u.route(page + '?id=' + item.id);
			},
			reload() {
				this.is_update = true;
				this.getArchives();
			},
			jiazai(){
				if (this.has_more) {
					this.status = 'loading';
					this.page++;
					this.getArchives();
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getArchives();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	._btn{
		border: none;
		background: #e0ebdd;
		line-height: 34px;
		font-size: 14px;
		font-family: '微软雅黑';
	}
	.article {
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		width: 100vw;

		.left {
			image {
				width: 200rpx;
				height: 150rpx;
				flex: 0 0 120rpx;
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;

			.content {
				margin-bottom: 10rpx;

				.flag {
					display: inline-block;
				}
			}
		}
	}
	
	.c_date_left{
		width: 29%;float: left;font-size: 14px;line-height: 35px;text-align: center;margin-left: 3%;
	}
	.c_date_right{
		width: 68%;float: left;line-height: 35px;color: #999;
	}
	.u-bg-white{
		background: #f9f9f9;
	}
	.uni-select {
		border: none!important;
	}
	.container {
	  padding: 20rpx;
	  background-color: #ffffff;
	}
	
	.header, .row {
	  display: flex;
	  flex-wrap: nowrap;
	  border-bottom: 1rpx solid #e0e0e0;
	}
	
	.header {
	  background-color: #e0ebdd; /* 浅绿色背景 */
	  font-weight: bold;
	}
	
	.cell {
	  padding: 20rpx 10rpx;
	  border-right: 1rpx solid #e0e0e0;
	  font-size: 14px;
	  color: #333;
	  text-align: center;
	  line-height: 32px;
	  font-weight: normal;
	  font-family: '微软雅黑';
	}
	
	.last {
	  border-right: none !important;
	}
	
	/* 适配不同屏幕尺寸 */
	@media (max-width: 375px) {
	  .cell {
	    font-size: 24rpx;
	    padding: 15rpx 8rpx;
	  }
	}
</style>
